<v-toolbar clipped-left app>
  <img
    :src="logo"
    :class="$style.logo"
  />

  <v-spacer />

  <v-progress-linear
    indeterminate
    :class="$style.progress"
    :active="!!busyCount"
    height="3"
  />

  <v-tooltip bottom v-if="waterTableDepth">
    <template v-slot:activator="{ on }">
      <v-layout v-on="on" style="max-width: 180px;" align-center>
        <v-icon class="mx-1">{{ $vuetify.icons.scaling }}</v-icon>
        <v-text-field
          label="Water table scaling"
          type="number"
          :min="20"
          :max="2000"
          step="1"

          :value="waterTableDepthScaling"
          @input="updateWaterTableDepthScaling"

          hide-details
          class="text-xs-center mr-2"
        />
        <v-divider vertical class="mx-2"/>
      </v-layout>
    </template>
    <span>Adjust Water table depth scaling</span>
  </v-tooltip>

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-layout v-on="on" style="max-width: 300px;" align-center>
        <v-icon class="mx-1">{{ $vuetify.icons.time }}</v-icon>
        <v-btn icon @click="togglePlay">
          <v-icon v-if="lastFrame">{{ $vuetify.icons.first }}</v-icon>
          <v-icon v-if="!lastFrame">{{ playing ? $vuetify.icons.pause : $vuetify.icons.play }}</v-icon>
        </v-btn>
        <v-slider
          :value="time"
          @input="updateTime"
          :min="timeMin"
          :max="timeMax"
          step="1"

          hide-details
          class="mx-2"
        />
         <v-text-field
          type="number"
          :min="timeMin"
          :max="timeMax"
          step="1"

          :value="time"
          @input="updateTime"

          hide-details
          class="text-xs-center ml-4 mr-1"
        />
      </v-layout>
    </template>
    <span>Timestep</span>
  </v-tooltip>

  <v-btn-toggle
    :value="viewAvailable"
    @change="updateViewAvailable"

    mandatory
    multiple
    class="ml-3"
    :class="$style.thinBorder"
  >
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on" value="surface">
          <v-icon>{{ $vuetify.icons.surface }}</v-icon>
        </v-btn>
      </template>
      <span>Surface</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on" value="sub-surface">
          <v-icon>{{ $vuetify.icons.subSurface }}</v-icon>
        </v-btn>
      </template>
      <span>Sub-Surface</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on" value="water-table-depth">
          <v-icon>{{ $vuetify.icons.waterTable }}</v-icon>
        </v-btn>
      </template>
      <span>Water table depth</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on" value="water-balance">
          <v-icon>{{ $vuetify.icons.waterBalance }}</v-icon>
        </v-btn>
      </template>
      <span>Water balance</span>
    </v-tooltip>
  </v-btn-toggle>
</v-toolbar>
